<template>
    <div>
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">店铺认证</span>
      </x-header>
      <div class="main-header">
        <group title="基本信息">
          <x-input title="店铺名称" placeholder="请输入您的店铺名称" class="important" v-model="shopName">
          </x-input>
          <popup-picker title="产品种类" class="important" :data="list1" v-model="value1" :columns="1" placeholder="请选择" show-name></popup-picker>
          <popup-picker title="店铺类型" class="important" :data="list2" v-model="value2" :columns="2" placeholder="请选择" show-name></popup-picker>
        </group>
        <group title="上传身份信息认证照片">
          <x-input title="身份认证" class="important" placeholder="上传身份证正反面" disabled></x-input>
          <cell-box class="upload">
            <span class="photo-tit">身份证正面</span>
            <div class="upload-pic" v-for="(item,index) in idCardPic1" :key="index">
              <img :src="item">
              <span class="file-remove" @click="remove(index)">+</span>
            </div>
            <div class="photo"  style="display: inline-block; position: relative;" v-if="idCardPic1.length<1">
              <input type="file" accept="image/*"
                     ref="fileToUpload" name="fileToUpload" id="fileToUpload" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
          <cell-box class="upload">
            <span class="photo-tit">身份证反面</span>
            <div class="upload-pic" v-for="(item,index) in idCardPic2" :key="index">
              <img :src="item">
              <span class="file-remove" @click="remove1(index)">+</span>
            </div>
            <div class="photo"style="display: inline-block; position: relative;" v-if="idCardPic2.length<1">
              <input type="file" accept="image/*"
                     ref="fileToUpload1" name="fileToUpload" id="fileToUpload1" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile1"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
        </group>
        <group title="营业信息认证">
          <x-input title="门面照片" class="important" placeholder="上传门头、门面情况、摆设照片各一张" disabled></x-input>
          <cell-box class="upload" >
            <span class="photo-tit">门头照片</span>
            <div class="upload-pic" v-if="shopPics[0]">
              <img :src="shopPics[0]">
              <span class="file-remove" @click="remove2(index)">+</span>
            </div>
            <div class="photo"style="display: inline-block; position: relative;" v-if="shopPics.length<1">
              <input type="file" accept="image/*"
                     ref="fileToUpload2" name="fileToUpload" id="fileToUpload2" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile2"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
          <cell-box class="upload" >
            <span class="photo-tit">门面情况</span>
            <div class="upload-pic" v-if="shopPics[1]">
              <img :src="shopPics[1]">
              <span class="file-remove" @click="remove2(index)">+</span>
            </div>
            <div class="photo" style="display: inline-block; position: relative;" v-if="shopPics.length<2">
              <input type="file" accept="image/*"
                     ref="fileToUpload3" name="fileToUpload" id="fileToUpload3" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile3"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
          <cell-box class="upload">
            <span class="photo-tit">摆设照片</span>
            <div class="upload-pic" v-if="shopPics[2]">
              <img :src="shopPics[2]">
              <span class="file-remove" @click="remove2(index)">+</span>
            </div>
            <div class="photo" style="display: inline-block; position: relative;" v-if="shopPics.length<3">
              <input type="file" accept="image/*"
                     ref="fileToUpload4" name="fileToUpload" id="fileToUpload4" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile4"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
          <x-input title="营业执照认证" class="important"  disabled></x-input>
          <x-input placeholder="请输入统一社会信用代码" class="code" v-model="bussinessLicenceNum"></x-input>
          <cell-box class="upload">
            <span class="photo-tit">上传营业执照</span>
            <div class="upload-pic" v-for="(item,index) in bussinessLicencePic" :key="index">
              <img :src="item">
              <span class="file-remove" @click="remove3(index)">+</span>
            </div>
            <div class="photo"  style="display: inline-block; position: relative;" v-if="bussinessLicencePic.length<1">
              <input type="file" accept="image/*"
                     ref="fileToUpload5" name="fileToUpload" id="fileToUpload5" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile5"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
          <cell-box class="upload">
            <div>
              <cell class="important licence" title="烟草专卖许可证认证"></cell>
              <span class="photo-tit2">上传烟草专卖许可证</span>
            </div>
            <div class="upload-pic2 " v-for="(item,index) in smokeLicencePic" :key="index">
              <img :src="item">
              <span class="file-remove" @click="remove4(index)">+</span>
            </div>
            <div class="photo2"style="display: inline-block; position: relative;" v-if="smokeLicencePic.length<1">
              <input type="file" accept="image/*"
                     ref="fileToUpload6" name="fileToUpload" id="fileToUpload6" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile6"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
          <cell-box class="upload">
            <div class="foods">
              <span class="foods-tit">食物流通许可证认证</span>
              <span class="photo-tit2 foods-licence">卖酒商家须上传食物流通许可证</span>
            </div>
            <div class="upload-pic2 " v-for="(item,index) in foodLicencePic" :key="index">
              <img :src="item">
              <span class="file-remove" @click="remove5(index)">+</span>
            </div>
            <div class="photo3" style="display: inline-block; position: relative;" v-if="foodLicencePic.length<1">
              <input type="file" accept="image/*"
                     ref="fileToUpload7" name="fileToUpload" id="fileToUpload7" style="opacity: 0;position: absolute;top:0;left:0;width: 5.36rem;height: 5.36rem" @change="uploadFile7"/>
              <img src="../../../static/icon/upload/zhaoxiangji-2.png">
            </div>
          </cell-box>
        </group>
        <group title="上传店铺所在位置">
          <cell :link="{path:'/map'}">
            <div slot="title" class="pop-tit">
              <img src="../../../static/icon/fabu/place.png" class="ico2">
              <span class="select2" style="display: flex;flex-wrap: nowrap">所在位置</span>
            </div>
            <div slot="default">
              <span v-model="Address" style="display: flex;flex-wrap: wrap">{{Address}}</span>
            </div>
            <el-amap vid="amap" :plugin="plugin" class="amap-demo"></el-amap>
          </cell>
        </group>
        <div class="submit" @click="commitShopVerify">
          提交
        </div>
      </div>
      <actionsheet v-model="show2" :menus="menus2" @on-click-menu="click" show-cancel></actionsheet>
    </div>
</template>

<script>
  import { TransferDom, Actionsheet,PopupPicker,Picker,cookie} from 'vux'
  import { commitShopVerify } from '@/api/user'
    export default {
        name: "shop_cert",

      components:{
        PopupPicker,
        Picker,
        Actionsheet,
      },
      directives: {
        TransferDom
      },
      data(){
          return{
            list1:[{
              name:'烟',
              value:'1'
            },{
              name:'酒',
              value:'2'
            },
              {
                name:'烟酒',
                value:'3'
              },],
            value1:[],
            list2:[{
              name:'烟店',
              value:'1'
            },{
              name:'酒店',
              value:'2'
            },
              {
                name:'烟酒店',
                value:'3'
              },
              {
                name:'红酒',
                value:'4'
              },
              {
                name:'啤酒',
                value:'5'
              },],
            value2:[],
            show2:false,
            menus2:{
              menu1:'拍照',
              menu2:'从相机中选择'
            },
            cid:'',
            shopName:'',
            saleType:'',
            shopType:'',
            idCardPic1:[],
            idCardPic2:[],
            shopPics:[],
            bussinessLicencePic:[],
            bussinessLicenceNum:'',
            smokeLicencePic:[],
            foodLicencePic:[],
            latitude:'',
            longitude:'',
            address:'',
            idCard1:'',
            idCard2:'',
            shopPic:'',
            busLicencePic:'',
            smokePic:'',
            foodPic:'',
          }
      },
      methods:{
        back(){
          this.$router.go(-1)
        },
        show(){
          this.show2=true
        },
        uploadFile () {
          let file = this.$refs.fileToUpload.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.idCardPic1.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadFile1 () {
          let file = this.$refs.fileToUpload1.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.idCardPic2.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadFile2 () {
          let file = this.$refs.fileToUpload2.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.shopPics.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadFile3 () {
          let file = this.$refs.fileToUpload3.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.shopPics.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadFile4 () {
          let file = this.$refs.fileToUpload4.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.shopPics.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadFile5 () {
          let file = this.$refs.fileToUpload5.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.bussinessLicencePic.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadFile6 () {
          let file = this.$refs.fileToUpload6.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.smokeLicencePic.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadFile7 () {
          let file = this.$refs.fileToUpload7.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('token','l_Qy04YaEejPEbHcRoptsW1m2c1kzT9G51cAET95:yUgEV7cURW87FBznMHypykwchgw=:eyJzY29wZSI6ImJhamlhb3dlYiIsImRlYWRsaW5lIjoxODU1OTIzNDk3fQ==')

          param.append('chunk','0');//添加form表单中其他数据
          console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.axios.post('http://upload.qiniu.com/',param,config)
            .then(response=>{
              console.log(response.data);
              this.foodLicencePic.push('http://img.bajiaostar.com/' + response.data.key)
            })
        },
        uploadProgress (evt) {
          console.log('上传中', evt);
        },
        remove(index){
          this.idCardPic1.splice(index,1)
        },
        remove1(index){
          this.idCardPic2.splice(index,1)
        },
        remove2(id){
          this.shopPics.splice(id,1);
        },
        remove3(index){
          this.bussinessLicencePic.splice(index,1)
        },
        remove4(index){
          this.smokeLicencePic.splice(index,1)
        },
        remove5(index){
          this.foodLicencePic.splice(index,1)
        },
        uploadComplete (evt) {
          console.log(evt); // 获取上传成功后返回的结果
        },
        uploadFailed (evt) {
          console.log('上传失败', evt);
        },
        uploadCanceled (evt) {
          alert('上传取消');
        },
        inputTheme (evt) {
        },
        getAddress(){
          this.Longitude=this.globalData.longitude;
          this.Latitude=this.globalData.latitude;
          this.Address=this.globalData.address;
        },
        commitShopVerify(){
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          this.saleType=parseInt(this.value1[0]);
          this.shopType=this.value2[0];
          this.idCard1=this.idCardPic1[0];
          this.idCard2=this.idCardPic2[0];
          this.shopPic=this.shopPics[0];
          this.busLicencePic=this.bussinessLicencePic[0];
          console.log(this.busLicencePic);
          this.smokePic=this.smokeLicencePic[0];
          this.foodPic=this.foodLicencePic[0];
          commitShopVerify({
            cid:this.cid,shopName:this.shopName,saleType:this.saleType,shopType:this.shopType,
            idCardPic1:this.idCard1,idCardPic2:this.idCard2,shopPics:this.shopPic,
            businessLicencePic:this.busLicencePic,businessLicenceNum:this.bussinessLicenceNum,
            smokeLicencePic:this.smokePic,foodLicencePic:this.foodPic,latitude:this.Latitude,
            longitude:this.Longitude
          }).then(res =>{
            console.log(res)
            this.$vux.toast.show({
              text:'发布成功',
              type:'success'
            })
            this.$router.push({
              name:'home'
            })
          })
        }
      },
      created(){
          this.getAddress();
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .important{
    background: url('../../../static/icon/Shop-certification/xinghao-2.png') no-repeat left;
    background-size: 0.57rem 0.57rem;
    background-position-x: 0.1rem;
  }
  .important span{
    font-size: 14px;
    color: #9B9B9B;
  }
  .photo-tit{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
    width: 5.93rem;
  }
  .upload-pic{
    width: 5.36rem;
    height: 5.36rem;
    margin-top: 1.14rem;
    margin-left: 12.29rem;
    display: inline-block;
    position:relative;
  }
  .upload-pic img{
    width: 5.36rem;
    height: 5.36rem;
  }
  .upload-pic2{
    width: 5.36rem;
    height: 5.36rem;
    display: inline-block;
    position:relative;
  }
  .upload-pic2 img{
    width: 5.36rem;
    height: 5.36rem;
  }
  .photo{
    border: 1px dashed #CCCCCC;
    border-radius: 2px;
    width: 5.36rem;
    height: 5.36rem;
    margin-top: 1.14rem;
    margin-left: 12.29rem;
  }
  .photo img{
    margin-left: 1.42rem;
    margin-top: 1.43rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .code{
    background: #F4F4F4;
    border-radius: 5px;
    margin-left: 1.07rem;
    margin-right: 1.07rem;
  }
  .photo-tit2{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .photo2{
    border: 1px dashed #CCCCCC;
    border-radius: 2px;
    width: 5.36rem;
    height: 5.36rem;
    margin-top: 1.14rem;
    margin-left: 5rem;
  }
  .photo2 img{
    margin-left: 1.42rem;
    margin-top: 1.43rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .licence{
    white-space: nowrap;
  }
  .foods{
    display: flex;
    flex-direction: column;
  }
  .foods-licence{
    margin-top: 0.65rem;
  }
  .photo3{
    border: 1px dashed #CCCCCC;
    border-radius: 2px;
    width: 5.36rem;
    height: 5.36rem;
    margin-top: 1.14rem;
    margin-left: 4.5rem;
  }
  .photo3 img{
    margin-left: 1.42rem;
    margin-top: 1.43rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .submit{
    position: absolute;
    width: 24.64rem;
    height: 3.57rem;
    background: #AD2532;
    border-radius: 1.78rem;
    /*margin-left: 1.07rem;*/
    left: 50%;
    margin-left: -12.32rem;
    margin-top: 1.43rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
  }
  .upload{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .file-remove{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 20px;
    height: 20px;
    font-size:20px;
    text-align: center;
    color: white;
    cursor: pointer;
    line-height: 20px;
    border-radius: 100%;
    transform: rotate(45deg);
    background: rgba(173,37,50,1);
  }
  .pop-tit{
    display: flex;
    flex-direction: row;
  }
  .ico2{
    width: 1.21rem;
    height: 1.5rem;
  }
  .select2{
    width: 5rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    margin-left: 1.2rem;
  }
</style>
